<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #clock{
            position: relative;
            width: 600px;
            height: 600px;
            background: url(img/clock.jpg);
            margin: 50px auto;
        }
        #clock div{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #hour{
            background: url(img/hour.png) no-repeat center center;
        }
        #minute{
            background: url(img/minute.png) no-repeat center center;
        }
        #second{
            background: url(img/second.png) no-repeat center center;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
<script>
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    setInterval(function(){//每秒获取一次
        var date = new Date();
        var ms = date.getMilliseconds();//得到毫秒数
        var s = date.getSeconds() + ms/1000;//得到秒数 带毫秒数的小数
        var m = date.getMinutes() + s/60;//得到分数 带秒数的小数
        var h = date.getHours()%12 + m/60;//得到小时数 带分数的小数 不超过12
        // console.log(h)
        // 指针偏转的角度数为：
        sA = s/60 * 360;
        mA = m/60 * 360;
        hA = h/12 * 360;
        second.style.WebkitTransform = "rotate("+sA+"deg)";
                     //  变化            旋转    deg  度
        minute.style.WebkitTransform = "rotate("+mA+"deg)";
        hour.style.WebkitTransform = "rotate("+hA+"deg)";

        

    },100)
    
</script>
</body>
</html>